<template>
    <div>
        <back-head title="商品详情" returnFlag="true"></back-head>
        <!-- 商品基本信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">商品基本信息</span>
            </div>
            <el-row class="goodsInfo mgb20" type="flex" style="flex-wrap: wrap">
                <el-col :span="9">
                    <p class="indent5">商品名称：
                        <el-tooltip class="item" :content="baseInfo.productName" placement="top">
                            <span>{{baseInfo.productName}}</span>
                        </el-tooltip>
                    </p>
                    <p class="indent5">商品类型：<span v-for="type in baseInfo.categoryList">{{type}}<br></span></p>
                </el-col>
                <el-col :span="9">
                    <p class="indent5">商品描述：
                        <el-tooltip class="item" :content="baseInfo.simpleDesc" placement="top">
                            <span>{{baseInfo.simpleDesc}}</span>
                        </el-tooltip>
                    </p>
                    <p class="indent4">详情页：<el-button @click="checkDetail(baseInfo.detailHtml)">查看详情页</el-button></p>
                </el-col>
                <el-col :span="6">
                    <p class="indent4">原产国：{{baseInfo.originCountryName}}</p>
                    <p class="indent4">制造商：{{baseInfo.allYxProductManu || '无'}}</p>
                    <p>配送区域：
                        <el-button type="text" style="font-size: 16px;" @click="checkArea()">查看</el-button>
                    </p>
                </el-col>
            </el-row>
            <el-row class="goodsInfo picInfo">
                <el-col :span="4" v-if="baseInfo.listPicUrl">
                    <p>列表页图片：</p>
                    <img :src="baseInfo.listPicUrl" alt="">
                </el-col>
                <el-col :span="4" :offset="1" v-if="baseInfo.picUrl1">
                    <p>商品大图1</p>
                    <img :src="baseInfo.picUrl1" alt="">
                </el-col>
                <el-col :span="4" :offset="1" v-if="baseInfo.picUrl2">
                    <p>商品大图2</p>
                    <img :src="baseInfo.picUrl2" alt="">
                </el-col>
                <el-col :span="4" :offset="1" v-if="baseInfo.picUrl3">
                    <p>商品大图3</p>
                    <img :src="baseInfo.picUrl3" alt="">
                </el-col>
                <el-col :span="4" :offset="1" v-if="baseInfo.picUrl4">
                  <p>商品大图4</p>
                  <img :src="baseInfo.picUrl4" alt="">
                </el-col>
            </el-row>
        </el-card>
        <!-- 商品规格信息 -->
        <el-card class="mgb20" shadow="hover">
            <div slot="header" class="clearfix">
                <span class="title">商品规格信息</span>
            </div>
            <el-row class="mgb50">
                <el-table
                    ref="table"
                    :data="baseInfo.skuList"
                    border
                    tooltip-effect="dark"
                    style="width: 100%">
                    <el-table-column
                        prop="skuCode"
                        label="商品SKU">
                    </el-table-column>
                    <el-table-column
                        width="150"
                        label="sku规格图片">
                        <template slot-scope="scope">
                            <img :src="scope.row.picUrl" alt="" style="width: 100%;">
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="sku规格信息"
                        width="150">
                        <template slot-scope="scope">
                            <div v-for="data in scope.row.allYxProductSkuSpec">
                                <p v-if="data.type == 0">{{data.name}}：{{data.value}}</p>
                                <img v-else :src="data.picUrl" alt="" style="width: 100%">
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="skuCount"
                        label="库存">
                    </el-table-column>
                    <el-table-column
                        label="渠道售价">
                        <template slot-scope="scope">
                            ￥{{scope.row.channelPrice | toFixed2}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="是否新品">
                        <template slot-scope="scope">
                            {{scope.row.newFlag == 0 ? '否' : '是'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="classification"
                        label="渠道选品对应分级信息">
                    </el-table-column>
                    <el-table-column                        
                        label="商品长/宽/高（cm）">
                        <template slot-scope="scope">
                            {{scope.row.length}} / {{scope.row.width}} / {{scope.row.height}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="商品毛重/净重（kg）">
                        <template slot-scope="scope">
                            {{scope.row.weight}} / {{scope.row.netWeight || '无'}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="shelfLife"
                        label="保质期（天）">
                    </el-table-column>
                    <el-table-column                        
                        label="配件">
                        <template slot-scope="scope">
                            {{scope.row.attrIsAccessory == 0 ? '否' : '是'}}
                        </template>
                    </el-table-column>
                    <el-table-column                        
                        label="箱品信息">
                        <template slot-scope="scope">
                            <el-button type="text" icon="el-icon-reading" @click="checkCase(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
            <el-row>
                <el-table
                    ref="table"
                    :data="baseInfo.allYxProductAttrList"
                    border
                    tooltip-effect="dark"
                    style="width: 60%;min-width: 800px;">
                    <el-table-column
                        prop="attrName"
                        label="属性名">
                    </el-table-column>
                    <el-table-column
                        prop="attrValue"
                        label="属性值">
                    </el-table-column>
                </el-table>
            </el-row>
        </el-card>

        <el-dialog title="箱品信息" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column 
                    property="packingCount" 
                    label="装箱数" 
                    width="150">
                </el-table-column>
                <el-table-column                     
                    label="外箱尺寸长/宽/高(cm)" 
                    width="200">
                    <template slot-scope="scope">
                        {{scope.row.packingLength}} / {{scope.row.packingWeight}} / {{scope.row.packingHeight}}
                    </template>
                </el-table-column>
                <el-table-column 
                    property="packingWeight" 
                    label="单箱毛重（kg）">    
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                id : this.$route.query.id,
                baseInfo:{}, //商品基本信息
                dialogTableVisible: false,   //箱品信息对话框flag
                gridData: {}   //箱品信息
            }
        },
        computed: {
            
        },
        created(){
            if(!this.id){
                this.$message.error("获取商品参数失败！");
                setTimeout(()=>{
                    this.$router.go(-1);
                },2000)
            }
            this.getData();
        },
        methods: {
            checkArea(){
                sessionStorage.setItem('deliveryAreaList',JSON.stringify(this.baseInfo.deliveryAreaList));
                this.$router.push({ path: '/deliveryArea', query: { type: 2, productCode: this.id }})
            },
            getData(){
                this.$axios
                    .post("/admin/product/getProductListInfo.json",{
                        productCode: this.id
                    })
                    .then(res => {
                        const data = res.data;
                        if(data.success){
                            this.baseInfo = data.data;
                        }else{
                            this.$message.error(data.message);
                        }
                    })
            },
            checkDetail(html){
                this.$alert(html, '详情页', {
                    dangerouslyUseHTMLString: true,
                    closeOnPressEscape: true,
                    closeOnClickModal: true,
                    
                }).catch(()=>{

                })
            },
            checkCase(data){
                this.gridData = data.allYxProductSkuSupplierAttr;
                this.dialogTableVisible = true;
            }
        }
    }

</script>


<style scoped>
    .goodsInfo p{
        padding: 8px 20px 8px 0;
        font-weight: bold;
        font-size: 16px;
        line-height: 1.6em;
    }
    .goodsInfo p.indent5{
        padding-left: 5em;
        text-indent: -5em;
    }
    .goodsInfo p.indent4{
        padding-left: 4em;
        text-indent: -4em;
    }
    .goodsInfo p.indent5 .item{
        display: inline-block;
        padding-left: 5em;
        max-width: calc(95% - 5em);
        vertical-align: bottom;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .picInfo .el-col{
        text-align: center;
    }
    .picInfo .el-col img{
        width: 100%;
        height: 10vw;
    }
</style>